﻿@model RedSand.Site.Models.ProductInfo
@{
    Layout = "~/Views/Shared/_LayoutProduct.cshtml";
}
<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        $(".tabContent").hide();
        $("#" + $('.active').attr("title")).show();
        $(".tab li a").click(function () {
            var IdNameHide = $('.active').attr("title")
            $('.active').removeClass("active");
            $(this).addClass("active");
            $("#" + IdNameHide).hide();
            $("#" + $(this).attr("title")).show();
            return false;
        })
    });
</script>
<!-- Product Details -->
<div class="Box product-detail-intro">
    <img src="/Content/Upload/Product/productDetail.jpg" />
    <div class="fl" style="width: 400px; margin-left: 20px;">
        <h1>
            mikroETH100 Board</h1>
        <div class="description">
            What makes this board so unique is that it comes with powerful on-board mikroProg™
            programmer and In-Circuit Debugger, capable of programming more than 250 microcontrollers.
            This makes development with EasyPIC v7 a whole new experience. Whether you are just
            a beginner, or a well-trained professional, this remarkable feature is an irreplaceable
            advantage.
        </div>
        <a href="#" class="file-attach">File đính kèm</a> <a href="#" class="document-attach">
            Tài liệu</a>
        <div class="clr">
        </div>
    </div>
    <div class="clr">
    </div>
</div>
<!-- Image Related -->
<link href="/Content/Jcarousel/jcarousel.css" rel="stylesheet" type="text/css" />
<script src="/Content/Jcarousel/jquery.jcarousel.min.js" type="text/javascript"></script>

<script type="text/javascript" language="javascript">
    function mycarousel_initCallback(carousel) {
        // Disable autoscrolling if the user clicks the prev or next button.
        carousel.buttonNext.bind('click', function () {
            carousel.startAuto(0);
        });

        carousel.buttonPrev.bind('click', function () {
            carousel.startAuto(0);
        });

        // Pause autoscrolling if the user moves with the cursor over the clip.
        carousel.clip.hover(function () {
            carousel.stopAuto();
        }, function () {
            carousel.startAuto();
        });
    };
    $(document).ready(function () {
        $('#mycarousel').jcarousel({
            auto: 2,
            wrap: 'last',
            initCallback: mycarousel_initCallback
        });

    });</script>
<div class="panel"  id="gallery">
    <ul id="mycarousel" class="jcarousel-skin-tango">
        <li>
            <img src="/Content/Upload/Product/productRelated.jpg" width="150" height="150" alt="" /></li>
        <li>
            <img src="/Content/Upload/Product/productRelated.jpg" width="150" height="150" alt="" /></li>
        <li>
            <img src="/Content/Upload/Product/productRelated.jpg" width="150" height="150" alt="" /></li>
        <li>
            <img src="/Content/Upload/Product/productRelated.jpg" width="150" height="150" alt="" /></li>
        <li>
            <img src="/Content/Upload/Product/productRelated.jpg" width="150" height="150" alt="" /></li>
        <li>
            <img src="/Content/Upload/Product/productRelated.jpg" width="150" height="150" alt="" /></li>
        <li>
            <img src="/Content/Upload/Product/productRelated.jpg" width="150" height="150" alt="" /></li>
        <li>
            <img src="/Content/Upload/Product/productRelated.jpg" width="150" height="150" alt="" /></li>
        <li>
            <img src="/Content/Upload/Product/productRelated.jpg" width="150" height="150" alt="" /></li>
        <li>
            <img src="/Content/Upload/Product/productRelated.jpg" width="150" height="150" alt="" /></li>
    </ul>
</div>
<!-- Tab -->
<ul class="tab">
    <li><a href="#" title="contentTab1" class="active">tab 1</a></li>
    <li><a href="#" title="contentTab2" class="">tab 2</a></li>
    <li><a href="#" title="contentTab3" class="">tab 3</a></li>
</ul>
<div class="Box tabContent" id="contentTab1">
    Nội dung 1</div>
<div class="Box tabContent" id="contentTab2">
    Nội dung 2</div>
<div class="Box tabContent" id="contentTab3">
    Nội dung 3</div>
@section ProductRelated
{
    @Html.Action("TopNew")
}
